<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <div class="mysls">
      <img :src="pic" alt="" class="myimg">
      <span class="bt">{{bt}}</span>
    </div>
    <div class="down" @click="gotopage">{{timeCount}} S后跳转</div>
    <span class="spandot" v-for="(l,i) in spanList" :key="i" :style="l">
    </span>
  </div>
</template>

<script>
import pic from "@/assets/images/m404.png";
var timer = null;
export default {
  name: "NotFound", // 组件命名
  data() {
    return {
      pic: pic,
       spanList:[],
       timeCount:5,
       bt:"Σ(oﾟдﾟoﾉ) 无法找到该页面~"
    };
  },
  methods:{
        spanInit(){
            var width = document.getElementById("bgstar").clientWidth
            var height = this.$refs.bgstar.clientHeight
            console.log(width,height)
            for(var i = 0;i<666;i++){
                var left = Math.random() * width;
                var top = Math.random() * height ;

                var scaler = Math.random() * 1.5;
                var rate = Math.random() * 2.5;
                var r =  Math.random()  * 255;
                var g =  Math.random()  * 255;
                var b =  Math.random()  * 255;
                var opacity = Math.random()  * 1;

                this.spanList.push({
                    left:left+'px',
                    top:top+'px',
                    transform:`scale(${scaler})`,
                    background:`rgba(${r},${g},${b},${opacity})`,
                    animationDelay:rate+'s'
                })
            }
        },
        timeDown(){
            timer = setInterval(()=>{
                if(this.timeCount>0){
                    this.timeCount--;
                }else{
                    clearInterval(timer)
                    timer = null;
                    this.gotopage()
                }
            },1000)
        },
        gotopage(){
            this.$router.push({name:'main'})
        }
    },
    mounted(){
        this.spanInit()
        this.timeDown()
    },
    // 销毁周期
    destroyed(){
        clearInterval(timer)
        timer = null;
    }
}
</script>


<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: white;
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid pink;
    color: gold;
    width: 70px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    background: skyblue;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: gold !important;
    }
  }
  .mysls{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .myimg {
    display: block;
    width: 300px;
  }
  .bt{
    color: #a0a0a0;
    text-align: center;
    font-size: 18px;
  }
  }

  .spandot {
    position: absolute;
    z-index: 100;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>